<template>
    <div >
        <div class="y-nav">
            <van-nav-bar title="基坑" left-text="返回" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
        </div>
        <div class="l-bottem">
        <ve-line class="cavs" :data="chartData" :settings="chartSettings"></ve-line>
        </div>
         <div class="y-top">
                <!-- 下拉框 -->
            <div class="y-nput-1">
                <span class="y-text">请选择：</span>
                <el-select :popper-append-to-body="false" class="select-option" v-model="val" @change="input2change(val)"  placeholder="基坑">
                    <el-option
                        v-for="item in yinput1"
                        :key="item.equipment_id"
                        :label="item.equipment_name"
                        :value="item.equipment_id"
                        >
                    </el-option>
                </el-select>
            </div>
         </div>
        <div class="col-right" >
            <div class="y-l-1">
                <p class="y-2-2">	
                    设备编号&nbsp;:<span class="l-1">{{this.datale1.pit_code}}</span>
                </p>
                <p class="y-2-2">
                    数据接收时间&nbsp;:<span class="l-1">{{this.datale1.pit_receive}}</span>
                </p>
                <p class="y-2-2">
                    测量点&nbsp;:<span class="l-1">{{this.datale1.pit_measure}}</span>
                </p>
                <p class="y-2-2">
                    变化量&nbsp;:<span class="l-1">{{this.datale1.pit_change}}</span>
                </p>  
                 <p class="y-2-2">
                    速率&nbsp;:<span class="l-1">{{this.datale1.pit_speed}}</span>
                </p>
                <p class="y-2-2">
                    预警值&nbsp;:<span class="l-1">{{this.datale1.pit_speed_warning}}</span>
                </p>
                <p class="y-2-2">
                    设计控制值&nbsp;:<span class="l-1">{{this.datale1.pit_control}}</span>
                </p>   
            </div>
            <!-- <div class="y-l-2">
               
            </div>  -->
        </div>          
    </div>
</template>
<script>
import http from '../api';
export default {
    data() {
          this.chartSettings = {
            metrics: ['日期', '次数'],
            dimension: ['日期'],
         };
        return {
               char1: [],
                yinput1:[],//基坑下拉
                val:"",
      chartData: {
        columns: ['日期', '次数'],
        rows: [
          { 日期: '1月', 次数: 13 },
          { 日期: '2月', 次数: 35 },
          { 日期: '3月', 次数: 17 },
          { 日期: '4月', 次数: 37 },
          { 日期: '5月', 次数: 45},
          { 日期: '6月', 次数: 13 },
          { 日期: '7月', 次数: 35 },
          { 日期: '8月', 次数: 17 },
          { 日期: '9月', 次数: 37},
          { 日期: '10月', 次数: 45 },
          { 日期: '11月', 次数: 37},
          { 日期: '12月', 次数: 45 },
        ],
      },
        //基坑数值
      datale1:{
            pit_code:"",
            pit_receive:"",
            pit_measure:"",
            pit_change:"",
            pit_speed:"",
            pit_speed_warning:"",
            pit_control:"",
      },
        }
    },
    methods:{
          onClickLeft() {
      this.$router.push({
          name: "主页",
        });
    },
       // //基坑
    //点击切换选项把id 给后台把获取的数据绑定插值表达式
      input2change(val){
        console.log("z这是基坑",val);
        let huanjing={};
        huanjing.equipment_id=val;
        http.ygetBuildPitList(huanjing).then((r) => {
            console.log("这是基坑数据",r.data)
            this.datale1=r.data[0];
        });
     },
    },
    mounted() {
          // 基坑下拉
    http.jkList({}).then((r) => {
      console.log("基坑",r.data );
      this.yinput1=r.data;
    });
    },
}
</script>
<style scoped>
/* 下拉菜单 */

.el-select >>> .el-input__inner {
  width: 100px !important;
  height: 26px;
  font-size: 12px;
  line-height: 26px;
  border: 1px solid #eee;
  padding: 5px!important;
}
 .el-select >>>.el-select__caret{
line-height: 26px!important;
}
.el-select:hover >>>.el-input__inner {
  border: 1px solid #eee!important;
}
.el-input__inner {
    padding: 5px!important;
}

 .el-tabs__item>>>.is-active{
    color:rgb(233, 243, 234)!important;
}
 .el-tabs__active-bar{
    background-color:rgb(215, 224, 216)!important;
 }
 .y-nav{
    /* width: 38rem; */
    height: 5rem;
    position: sticky;
    top: 0;
     z-index: 1000;
     background: #fff;
    }
 
 
.l-bottem {
  /* width: 38rem; */
  height: 31rem;
  /* background: indigo; */
}
.cavs{
    /* width: 38rem; */
   height: 36.1rem;
    /* background: cyan; */
}
.y-top{
    /* width: 38rem; */
    height: 1rem;
    /* float: left; */
    padding-left: 1.3rem;
    /* background: cornflowerblue; */
    position: relative;
}
.col-right{
    /* width: 38rem; */
    height: 36rem;
}
.y-l-1 {
  /* width: 20rem; */
  height: 30rem;
  /* float: left; */
  padding-left: 1.3rem;
  /* background: powderblue; */
}

.y-2-2{
    
   font-size: 1.5rem;
}
.l-1{
  padding-left: 10px;
}
.y-nput-1{
  /* width: 38rem; */
  height: 2rem;  
  /* background: red; */
  margin-top:2rem; 
}
.y-text{
    font-size: 1.5rem;
}
</style>